<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用objectURLs处理文件</title>
</head>

<body>
  <div>
    <h1>Use Object URL</h1>
    <input type="file" id="file-uploader" accept=".jpg, .jpeg, .png">
    <div id="image-grid"></div>
  </div>
</body>
<script>
  /*
  有一个称为 URL.createObjectURL() 的特殊方法，可以从文件创建唯一的URL，您也可以使用 URL.revokeObjectURL() 方法释放它。
DOM URL.createObjectURL() 和 URL.revokeObjectURL() 方法让你可以创建简单的URL字符串，
这些字符串可以用来引用任何可以使用DOM文件对象引用的数据，包括用户计算机上的本地文件。
对象URL的简单用法是：
img.src = URL.createObjectURL(file);
  */

  const fileUploader = document.getElementById('file-uploader');
  const reader = new FileReader();
  const imageGrid = document.getElementById('image-grid');

  fileUploader.addEventListener('change', (event) => {
    const files = event.target.files;
    const file = files[0];

    const img = document.createElement('img');
    imageGrid.appendChild(img);
    img.src = URL.createObjectURL(file);
    img.alt = file.name;
  });
</script>

</html>